/**
 * Created by zzy on 2017/8/29.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    Dimensions,
    ScrollView,
    PixelRatio,
    InteractionManager,
    DeviceEventEmitter
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'
import Constant from '../Contant'
import ButtonControl from '../component/ButtonControl'
import PayUtil from '../util/PayUtil'
import {PriceLabel} from "./ShoppingCart";
import LoadingView from "../component/LoadingView";
import {observer} from "mobx-react";
import {observable} from 'mobx'
import Toast from 'react-native-easy-toast'

// 支付方式
const payChannels = [
    {
        title: '微信支付',
        desc: '推荐开通微信支付的用户使用',
        icon: require('../../asserts/order/order_WeChat.png')
    },
    {
        title: '支付宝支付',
        desc: '推荐安装支付宝客户端且有支付宝账户的用户使用',
        icon: require('../../asserts/order/order_PayTreasure.png')
    }
]
@observer
export default class QuickPay extends Component{

    @observable loading = false ;

    static navigationOptions = {
        title: '支付'
    };
    render(){
        return <View style={{flex: 1, backgroundColor: '#f5f5f5'}}>
            <ScrollView>
                <PayHeader price={this.props.navigation.state.params.totalPrice}/>
                <PayContent payConfirm={this._confirm.bind(this)}/>
            </ScrollView>
            <LoadingView
                visible={this.loading}
                color="white"
                indicatorSize="small"
                messageFontSize={12}
                message=''
            />
            <Toast ref="toast" position='center'/>
        </View>
    }
    _confirm(channel) {
        let {orderId,orderNo} = this.props.navigation.state.params;
        this.loading = true ;
        PayUtil.confirm('', orderId, channel, (result) => {
            this.loading = false ;
            LOG('confirm-------',JSON.stringify(result));
            PayUtil.pay(result, (result) => {
                LOG('payresult--------',JSON.stringify(result));
                InteractionManager.runAfterInteractions(() => {
                    this.props.navigation.navigate('PayResult',{payInfo:{
                        orderId:orderNo,
                        channel:channel
                    }})
                })
            })
        });
    }
    showToast(msg){
        this.refs.toast.show(msg);
    }
    componentWillUnmount(){
        DeviceEventEmitter.emit('payComplete');//通知确认订单页返回
    }
}


class PayContent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectIndex: 0
        }
    }

    _payChannel() {
        switch (this.state.selectIndex) {
            case 0: {
                return Constant.WeixinPay
            }
            case 1: {
                return Constant.AlipayClient
            }
            default: {
                return Constant.WeixinPay
            }
        }
    }

    render() {
        let {payConfirm} = this.props;
        return <View style={{backgroundColor: '#fff'}}>
            <View style={[{marginLeft: 10, height: 40, justifyContent: 'center'}, quickPayStyle.borderBottom]}>
                <Text style={{color: 'gray'}}>选择其他支付方式</Text>
            </View>
            {
                payChannels.map((channel, index) => {
                    return <PayChannelCell
                        key={index}
                        channel={channel.title}
                        desc={channel.desc}
                        icon={channel.icon}
                        selected={index == this.state.selectIndex}
                        onClick={() => {
                            this.setState({
                                selectIndex: index
                            })
                        }}
                    />
                })
            }
            <View style={{marginTop: 20}}>
                <ButtonControl title="立即支付" click={() => {
                    let currentChannel = this._payChannel();
                    payConfirm(currentChannel)
                }}/>
            </View>
        </View>
    }
}
class PayChannelCell extends Component {
    render() {
        let {icon, channel, desc, selected, onClick} = this.props;
        let selColor = selected ? Constant.BLUECOLOR : '#f5f5f5';
        return <TouchableOpacity
            activeOpacity={0.9}
            onPress={onClick}
            style={[{flexDirection: 'row', justifyContent: 'space-between'}, quickPayStyle.borderBottom]}>
            <View style={{flexDirection: 'row'}}>
                <View>
                    <Image style={{width: 40, height: 40, marginLeft: 10, marginVertical: 10}} source={icon}/>
                </View>
                <View style={{justifyContent: 'center', marginLeft: 10}}>
                    <Text style={{color: 'black', fontSize: 15, paddingVertical: 5, fontWeight: '100'}}>{channel}
                    </Text>
                    <Text style={{color: 'gray', fontSize: 12}}>{desc}</Text>
                </View>
            </View>
            {
                <View style={{justifyContent: 'center', marginRight: 15}}>
                    <Icon name="ios-checkmark-circle-outline" size={20} color={selColor}/>
                </View>
            }

        </TouchableOpacity>
    }
}
// 支付头部组件
class PayHeader extends Component {
    render() {
        return <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', height: 40,backgroundColor: '#f5f5f5'}}>
            <View style={{marginLeft: 10}}>
                <Text>实付金额</Text>
            </View>
            <View style={{marginRight: 10}}>
                <PriceLabel price={this.props.price}/>
            </View>
        </View>
    }
}

const quickPayStyle={
    center: {
        alignItems: 'center',
        justifyContent: 'center'
    },
    borderBottom: {
        borderBottomColor: '#f5f5f5',
        borderBottomWidth: 1 / PixelRatio.get()
    }
};